import { React, useState, useEffect } from 'react';
import { Breadcrumb, Button, Select, Row, Col, Input, Form, Modal ,Radio,Table,message} from 'antd'
import FormItem from 'antd/lib/form/FormItem';
import axios from 'axios'


const BingFangXinXi = (props) => {
    const [modalVisible, setmodalVisible] = useState(false)
    const [page,setpage]=useState(1)
    const [total,settotal]=useState()
    const [keBie, setkeBie] = useState()
    const [bingChuangHao, setbingChuangHao] = useState()
    const [bingRenXingMing,setbingRenXingMing]=useState()
    const [xzChuangHao,setxzChuangHao]=useState()
    const [tableData,settableData]=useState([
        {
            key:1,
            zhuYuanHao:2001,
            bingRenXingMing:"巩羽凡",
            bingChuangHao:"0129",
            suoShuYiSheng:"袁州",
            bingFangHao:"01",
            keBie:"泌尿内科"
        },
        {
            key:2,
            zhuYuanHao:2002,
            bingRenXingMing:"wdasdsa",
            bingChuangHao:"0129",
            suoShuYiSheng:"袁dasda州",
            bingFangHao:"01",
            keBie:"wedqw"
        }
    ])
    // 表格列
    const columns =[
        {
            title:"住院号",
            dataIndex:"zhuYuanHao",
            key:"zhuYuanHao",
            align:"center"
        },
        {
            title:"病人姓名",
            dataIndex:"bingRenXingMing",
            key:"bingRenXingMing",
            align:"center"
        },
        {
            title:"病床号",
            dataIndex:"bingChuangHao",
            key:"bingChuangHao",
            align:"center"
        },
        {
            title:"所属医生",
            dataIndex:"suoShuYiSheng",
            key:"suoShuYiSheng",
            align:"center"
        },
        {
            title:"病房号",
            dataIndex:"bingFangHao",
            key:"bingFangHao",
            align:"center"
        },
        {
            title:"科室",
            dataIndex:"keBie",
            key:"keBie",
            align:"center"
        },
        {
            title:"操作",
            key:"todo",
            render:(record)=>{
                return(
                    <div>
                        <Button type="primary" onClick={()=>chaKan(record)}>查看</Button>
                          <Button type="deafult" onClick={()=>xiuGai(record)}  style={{backgroundColor:"rgb(48, 233, 94)",borderRadius:"3px",marginLeft:"5px",color:"white",border:"0"}}>修改</Button>
                    </div>
                )
            },
            align:"center"
        },
    ]
    //table分页
     const paginationProps = {
        // page: page, 
        // onChange : (page) => this.handleTableChange(page),
        onChange:(page)=>{
            // setpage(page)
            // console.log(page);
            getTableData(page)
        },
        total: total,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    const [options,setoptions]=useState([])
    // const options = [
    //     {
    //         key: 1,
    //         value: "全部"
    //     },
    //     {
    //         key: 2,
    //         value: "骨科"
    //     }
    // ]
    const xzOptions=options.slice(1)
        
    // 科别选择下拉框
    const changeKeBie = (key, value) => {
        // console.log(value.value);
        
        if(value){
            setkeBie(value.value)
        }else{
            setkeBie()
        }
    }
    // 查看按钮
    const chaKan=(record)=>{
        console.log(record);
        console.log(props);
        props.history.push("/zy/bingChuangXinXi")
        props.history.location.state=record.zhuYuanHao
    }
    // 修改按钮
    const xiuGai=(record)=>{
        props.history.push("/zy/xiugaibingchuang")
        props.history.location.state=record.zhuYuanHao
    }
    // 查询按钮
    const chaXun = () => {
        // console.log(keBie);
        getTableData(1)
    }
    // 新增按钮
    const xinZeng = () => {
        setmodalVisible(true)
    }
    // 提交
    const Tijiao=()=>{
        setmodalVisible(false)
        axios("/chuangWeiDengJi/xinZeng",{
            method:"post",
            data:{chuangHao:xzChuangHao,keBie:keBie}
        })
        .then(res=>{
            console.log(res);
            if(res.data.code===200){
                message.success(res.data.msg)
                setkeBie("")
                setxzChuangHao("")
                getTableData(1)  
            }
            
        })
    }
    // 输入病床号
    const cxBingChuangHao=(e)=>{
        setbingChuangHao(e.target.value)
        console.log(e.target.value);
    }
    // 输入病人姓名
    const cxbingRenXingMing=(e)=>{
        setbingRenXingMing(e.target.value)
        // console.log(e.target.value);
    }
    // 模态框关闭
    const close=()=>{
        setmodalVisible(false)
    }
    // 获取科室
    const getKeShi=()=>{
        axios("keShiBianMa/chaXunAll",{
            method:"GET",
        })
        .then(res=>{
            console.log(res.data);
            if(res.data.code===200){
                let temp=res.data.list
                let arr=[]
                for(let i=0;i<temp.length;i++){
                    let tempObj={}
                    tempObj.key=temp[i].id
                    tempObj.value=temp[i].keShiMingCheng
                    arr.push(tempObj)
                }
                setoptions(arr)
            }
        })
    }
    // 新增床号
    const changeChunagHao=(e)=>{
        // console.log(e);
        setxzChuangHao(e)
    }
    // 获取表格数据
    const getTableData=(page)=>{
        axios("/chuangWeiDengJi/chaXunByTiaoJian",{
            method:"GET",
            params:{chuangHao:bingChuangHao,keBie:keBie,xingMing:bingRenXingMing,page:page}
        })
        .then(res=>{
            console.log(res);
            if(res.data.code===200){
                let temp=res.data.data
                let arr=[]
                for(let i=0;i<temp.length;i++){
                    let tempObj={}
                    tempObj.key=temp[i].id
                    tempObj.keBie=temp[i].keBie
                    tempObj.zhuYuanHao=temp[i].ruYuanBingRenJiBenZiLiaoDengJi.zhuYuanHao
                    tempObj.bingRenXingMing=temp[i].ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                    tempObj.bingChuangHao=temp[i].chuangHao
                    tempObj.suoShuYiSheng=temp[i].ruYuanBingRenJiBenZiLiaoDengJi.zhuZhi
                    tempObj.bingFangHao=temp[i].chuangHao.substr(0,2)
                    arr.push(tempObj)
                }
                console.log(arr);
                settableData(arr)
                settotal(res.data.count)
            }
        })
    }
    useEffect(()=>{
        getKeShi()
        getTableData(1)
    },[])
    return (
        <div>
            {/* 面包屑导航 */}
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>病房管理</Breadcrumb.Item>
                <Breadcrumb.Item>病房信息</Breadcrumb.Item>
            </Breadcrumb>

            {/* 搜索框 */}
            <Row>
                <Col span={24}>
                    <Form layout="inline">
                        <FormItem label="病床号" name="bingChuangHao">
                            <Input value={bingChuangHao} onBlur={cxBingChuangHao}></Input>
                        </FormItem>
                        <FormItem label="病人姓名" name="bingRenXingMing">
                            <Input value={bingRenXingMing} onBlur={cxbingRenXingMing}></Input>
                        </FormItem>
                        <FormItem label="科别" name="keBie">
                            <Select allowClear style={{ width: "200px" }} options={options} onChange={changeKeBie}>
                            </Select>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={chaXun}>查询</Button>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={xinZeng}>新增</Button>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
            {/* 新增模态框 */}
            <Modal title="新增床位" visible={modalVisible}  width="300px" footer onCancel={close}>
                <Form layout="horizontal" onFinish={Tijiao}>
                    <FormItem label="床号" name="chuangHao">
                        <Input value={xzChuangHao} onBlur={(e)=>changeChunagHao(e.target.value)}></Input>
                    </FormItem>
                    <FormItem label="科别" name="xzkeBie">
                        <Select allowClear style={{width:"210px"}} options={xzOptions} onChange={changeKeBie}></Select>
                    </FormItem>
                    <FormItem style={{textAlign:"right"}}>
                        <Button type="primary" htmlType="submit">提交</Button>
                    </FormItem>
                </Form>
            </Modal>
            {/* 表格 */}
            <Row style={{marginTop:"20px"}}>
                <Col span={24}>
                <Table columns={columns} dataSource={tableData} pagination={paginationProps} ></Table>
                </Col>
            </Row>
        </div>

    );
}

export default BingFangXinXi;
 